<!DOCTYPE html>
<html>
  <head>
    <title>用户注册.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link href="bootstrap2.3.2/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap2.3.2/css/bootstrap-responsive.css" rel="stylesheet">
	<link href="bootstrap2.3.2/css/bootstrap-extend.css" rel="stylesheet" >
	
	<style type="text/css">

	</style>
  </head>
  
  <body>
    <div class="container-fluid">
		<div class="span3"></div>
		<div class="span9">
			    <form class="form-horizontal">
				<fieldset>
				<legend>用户注册</legend>
				<div class="control-group" id="accountgroup">
					<label class="control-label">账号</label>
					<div class="controls">
						<input type="text" id="account" name="account" placeholder="账号" data="check:reg_account">
						<span class="help-inline" style="display:none;">账号由字母、数字组成,长度应为6~18个字符</span>
					</div>
				</div>
				<div class="control-group" id="passwordgroup">
					<label class="control-label">密码</label>
					<div class="controls">
						<input type="password" id="password" name="password" placeholder="密码" data="check:reg_password">
						<span class="help-inline" style="display:none;">密码由大小字母、数字或特殊字符组成,长度应为6~18个字符</span>
					</div>
				</div>
				<div class="control-group" id="usernamegroup">
					<label class="control-label">姓名</label>
					<div class="controls">
						<input type="text" id="username" name="username" placeholder="姓名" data="check:reg_username">
						<span class="help-inline" style="display:none;">姓名由字母或者中文组成,英文长度为4~24,中文长度应为2~4个字符</span>
					</div>
				</div>
				<div class="control-group" id="cardgroup">
					<label class="control-label">身份证</label>
					<div class="controls">
						<input type="text" id="card" name="card" placeholder="身份证" data="check:reg_card">
						<span class="help-inline" style="display:none;">身份证目前只支持18位效的身份号</span>
					</div>
				</div>
				<div class="control-group" id="emailgroup">
					<label class="control-label">邮箱</label>
					<div class="controls">
						<input type="text" id="email" name="email" placeholder="邮箱" data="check:reg_email">
						<span class="help-inline" style="display:none;">邮箱由字母开头的数字,下划线组合带有@特殊字符的域名</span>
					</div>
				</div>
				<div class="control-group" id="phonegroup">
					<label class="control-label">手机</label>
					<div class="controls">
						<input type="text" id="phone" name="phone" placeholder="手机" data="check:reg_phone">
						<span class="help-inline" style="display:none;">11位手机号码,3-4位区号,7-8位直播号码,1－4位分机号</span>
					</div>
				</div>
				<div class="control-group" id="addrgroup">
					<label class="control-label">地址</label>
					<div class="controls">
						<input type="text" id="addr" name="addr" placeholder="地址" data="check:reg_addr">
						<span class="help-inline" style="display:none;">地址由字母或者中文组成,英文长度为4~100,中文长度应为4~25个字符</span>
					</div>
				</div>
				<div class="control-group" id="sexgroup">
					<label class="control-label">性别</label>
					<div class="controls">
						<input type="checkbox" id="sex_nan" name="sex"> 先生 
						<input type="checkbox" id="sex_nv" name="sex" style="margin-left:10px;"> 女士
						<span class="help-inline" style="display:none;">Something may have gone wrong</span>
					</div>
				</div>
				<div class="control-group">
					<div class="controls">
						<a class="btn" onclick="Register()">注册</a>
					</div>
				</div>
				</fieldset>
				</form>
		 </div>
	</div>
  </body>
  
  <script src="bootstrap2.3.2/js/jquery-1.7.2.min.js"></script>
  <script src="bootstrap2.3.2/js/bootstrap.js"></script>
  <script type="text/javascript">
  $(function(){
	$("input[data^='check']").blur(function(){
		check(this);
	 });
  });
  
  function Register(){
	if($(".form-horizontal .error").length==0){
		window.location.href = "login.html";
	}
  }
  
  function checkAll(){
     $("input[data^='check']").each(function(){
		check(this);
	 });
  }
  
  function check(obj){
    var data = $(obj).attr("data").split(":");
	var reg = data[1];
	eval("reg = "+reg+";");
	check_reg(obj,reg);
  }
  
  
  // 字母开头，允许6-18字节，允许字母数字下划线
  var reg_account = /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/; 
  // 密码
  var reg_password = /^[a-zA-Z0-9_~!@#$%^&*()_+]{6,18}$/; 
  // 邮箱
  var reg_email= /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  // 手机
  var reg_phone = /^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
  // 姓名
  var reg_username = /^[a-zA-Z0-9\s]{4,24}$|^[\u4e00-\u9fa5]{2,4}$/;
  // 中文
  var reg_china = /^[a-zA-Z0-9]{4,24}$|^[\u4e00-\u9fa5]{2,4}$/;
  // 地址
  var reg_addr = /^[a-zA-Z0-9]{4,100}$|^[\u4e00-\u9fa5]{4,25}$/;
  // 身份证
  var reg_card =/^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)\d{4}((19\d{2}(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(19\d{2}(0[13578]|1[02])31)|(19\d{2}02(0[1-9]|1\d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))\d{3}(\d|X|x)?$/;
  // 校验正则表达式
  function check_reg(obj,reg){
	var val = $(obj).val();    
	if(val.length!=0){     
		// 不通过
		if(!reg.test(val)){    
			$(obj).parents(".control-group").addClass("error");
			$(obj).next("span").show();
		// 通过
		}else{
			$(obj).parents(".control-group").removeClass("error");
		}    
	}  
  }
  </script>
</html>
